<template>
  <div class="catritem" @click="toDetail(item.id)">
    <img :src="item.image" alt="" />
    <h4>{{ item.store_name }}</h4>
    <p>￥{{ item.price }}</p>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
    },
  },
  methods:{
    toDetail(id){
     this.$router.push({ path: "/detail", query: { id: id } });
  }
  }
};
</script>
<style lang="scss" scoped>
.catritem {
  width: 47%;
  margin-bottom: 20px;
  img {
    width: 100%;
    height: 85%;
    border-radius: 10px;
  }
  h4 {
    width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }
  p {
    font-size: 12px;
    color: red;
  }
}
</style>